<wicket:extend xmlns:wicket="http://www.w3.org/1999/xhtml">
  <header class="app-header navbar">
    <button class="navbar-toggler mobile-sidebar-toggler d-lg-none mr-0" type="button">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="./home">
	    <img class="img-logo mr-0" src="logo.png" wicket:message="src:logo.png.url"/>
	    <div class="navbar-title">
	      <wicket:message key="application.name">Orienteer</wicket:message>
	    </div>
    </a>

    <button class="navbar-toggler sidebar-toggler d-md-down-none mr-auto" type="button">
		  <span class="navbar-toggler-icon"></span>
	  </button>


    <ul class="nav navbar-nav d-md-down-none ml-auto">
      <li class="nav-item px-1">
        <form wicket:id="searchForm" class="sidebar-search">
          <div class="input-group custom-search-form">
            <input type="text" class="form-control" placeholder="Search..." wicket:id="query">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button" wicket:id="search">
                <i class="fa fa-search"></i>
              </button>
            </span>
          </div>
        </form>
      </li>
    </ul>
    <ul class="nav navbar-nav px-2">
      <li class="nav-item d-lg-none">
        <a class="nav-link" href="/search">
          <i class="fa fa-search"></i>
        </a>
      </li>

      <li wicket:id="perspectivesContainer" class="nav-item dropdown">
        <button class="btn btn-secondary dropdown-toggle" wicket:id="perspectiveButton" type="button" id="perspectiveMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa-fw" wicket:id="icon"></i>
          <span wicket:id="name" class="d-md-down-none"></span>
        </button>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="perspectiveMenuButton">
          <div class="dropdown-header text-center">
            <strong><wicket:message key="menu.perspective">Perspective</wicket:message></strong>
          </div>
          <div wicket:id="perspectives">
          	<a wicket:id="link" class="dropdown-item"><i class="fa-fw" wicket:id="icon"></i> <span wicket:id="name"></span></a>
          </div>
        </div>
      </li>
      <li class="nav-item dropdown px-2">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="accountMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa fa-user fa-fw"></i>
          <span wicket:id="username"></span>
        </button>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="accountMenuButton">

          <div class="dropdown-header text-center">
            <strong><wicket:message key="menu.settings">Settings</wicket:message></strong>
          </div>
          <wicket:enclosure child="logout">
            <a class="dropdown-item" wicket:id="myProfile">
              <i class="fa fa-user fa-fw"></i>
              <wicket:message key="menu.userProfile">User Profile</wicket:message>
            </a>
            <a class="dropdown-item" wicket:id="logout"><i class="fa fa-sign-out fa-fw"></i> <wicket:message key="menu.logout"></wicket:message></a>
          </wicket:enclosure>
          <wicket:enclosure>
            <a class="dropdown-item" wicket:id="login"><i class="fa fa-sign-in fa-fw"></i> <wicket:message key="menu.login"></wicket:message></a>
          </wicket:enclosure>
        </div>
      </li>
    </ul>
  </header>

  <div class="app-body">
    <div class="sidebar">
      <nav class="sidebar-nav open">
        <ul class="nav" wicket:id="perspectiveItems"></ul>
      </nav>
      <button class="sidebar-minimizer brand-minimizer" type="button"></button>
    </div>
    <main class="main">
      <div wicket:id="pageHeader"></div>
      <div class="container-fluid">
        <div wicket:id="feedbacks"></div>
        <wicket:child></wicket:child>
      </div>
    </main>
  </div>
</wicket:extend>
